<template>
  <div class="knowledge-base-container">
    <!-- 内容区 -->
      <el-row class="content-area">
        <!-- 左侧文件树 -->
        <el-col :span="5" class="left-sidebar">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <span>收藏分类</span>
              <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-plus" @click="openDialog">
              </el-button>
            </div>
              <div
                class="category-items"
                :class="{ 'category-items-active': item.categoryId === current }"
                v-for="item in categoryList"
                :key="item.categoryId"
                @click="selectCategory(item.categoryId)"
              >
                <span class="category-text ">{{ item.categoryName }}</span>
                <i  class="el-icon-delete delete-icon"
                    @click="deleteCategory(item.categoryId)"
                    style=" font-size: 12px;"></i>
              </div>
          </el-card>
        </el-col>

        <!-- 搜索结果区 -->
        <el-col :span="19" class="search-results">
          <el-card
           class="box-card"
           shadow="never"
          >
            <div slot="header" >
               搜索框
              <el-input
                v-model="fileInfoQueryParams.fileName"
                placeholder="请输入关键词"
                size="small"
                style="width: 200px;"
                clearable
                prefix-icon="el-icon-search"
                @keyup.enter.native="handleQuery"
              />
              <div class="right-tools">
                <el-radio-group v-model="viewMode">
                  <el-radio-button label="grid">
                    <i class="el-icon-view"></i>
                  </el-radio-button>
                  <el-radio-button label="list">
                    <i class="el-icon-menu"></i>
                  </el-radio-button>
                </el-radio-group>
                <el-select v-model="sortType" size="small" style="margin-left: 10px">
                  <el-option label="按收藏时间排序" value="collectTime"></el-option>
                  <el-option label="按修改时间排序" value="modifyTime"></el-option>
                  <el-option label="按名称排序" value="name"></el-option>
                  <el-option label="按大小排序" value="size"></el-option>
                </el-select>
              </div>
            </div>

            <!-- 添加分类对话框 -->
            <el-dialog
              :visible.sync="dialogVisible"
              title="添加分类"
              width="30%"
              center
            >
              <el-input v-model="categoryQueryParams.categoryName" placeholder="分类" clearable></el-input>
              <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="confirm">确认</el-button>
                    <el-button @click="cancel">取消</el-button>
             </span>
            </el-dialog>

            <!-- 网格视图 -->
            <div v-if="viewMode === 'grid'" class="grid-view">
              <div class="document-grid">
                <div class="document-item" v-for="(item) in fileCollectList" :key="item.fileId">
                  <el-card shadow="hover" class="document-card">
                    <div class="card-header">
                      <FileTypeIcon type="pdf" /> <!-- 应该显示 el-PDF 对应的图标 -->
                    </div>
                    <div class="card-body">
                      <h3 class="document-title">{{ item.fileName }}</h3>
                      <div class="document-info">
                        <span>{{ item.uploadBy }}</span>
                        <span class="divider">·</span>
                        <span>{{ item.uploadTime}}</span>
                      </div>
                      <div class="document-tags">
                        <el-tag v-for="tag in item.tags" :key="tag" type="info">{{ tag }}</el-tag>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
              <div v-if="total === 0" class="no-data" >暂无数据</div>
            </div>

            <!-- 列表视图 -->
            <div v-else class="list-view">
              <el-table :data="fileCollectList" stripe>
                <el-table-column prop="fileName" label="标题"></el-table-column>
                <el-table-column prop="uploadBy" label="作者"></el-table-column>
                <el-table-column prop="uploadTime" label="时间"></el-table-column>
                <el-table-column label="标签">
                  <template slot-scope="scope">
                    <el-tag v-for="tag in scope.row.tags" :key="tag" size="mini">{{ tag }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button-group>
                      <el-button style=" margin-right: 5px;" size="mini" type="text" icon="el-icon-download" @click="download(scope.row)"></el-button>
                      <el-button style=" margin-right: 5px;" size="mini" type="text" icon="el-icon-share" @click="share(scope.row)"></el-button>
                      <el-button style=" margin-right: 5px;" size="mini" type="text" icon="el-icon-delete" @click="deleteDoc(scope.row.fileId)"></el-button>
                    </el-button-group>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页控件 -->
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="list"
            />
          </el-card>
        </el-col>
      </el-row>

  </div>
</template>

<script>

import FileTypeIcon from "@/components/FileTypeIcon.vue";
import {listFile, listFileCollect} from "@/api/file/fileCollect";
import {addCategory, delCategory, listCategory} from "@/api/file/category";
import {delInfo} from "@/api/file/info";
import {downloadFileToMinio} from "@/utils/file";

export default {
  name: 'KnowledgeBase',
  components: {
    FileTypeIcon
  },
  data() {
    return {
      sortType: " ",
      viewMode: 'grid',
      searchQuery:null,
      queryParams: {
        userId: null,
        fileId: null,
        favoriteTime: null,
        note: null,
        isDeleted: null
      },
      dialogVisible: false, // 控制对话框的显示
      categoryName: '' ,// 输入框的内容
      total:0,
      // 用户收藏文件表格数据
      fileCollectList: [],
      fileInfoQueryParams: {
        pageNum: 1,
        pageSize: 10,
        fileSize: null,
        fileCategoryId: null,
        uploadBy: null,
        uploadTime: null,
        status: null,
        permission: null,
        fileName:null,
      },
      categoryQueryParams: {
        categoryName: null,
        parentCategoryName:null
      },
      categoryList:null,
      current:0
    }
  },
  created() {
    this.list()
    this.load();
  },
  methods: {
    list(){
      listFile(this.fileInfoQueryParams).then(res => {
        this.fileCollectList=res.rows
        this.total=res.total
        console.log("this.fileCollectList",res)
      })
    },
    //   左侧导航栏
    selectCategory(categoryId) {
      this.current = categoryId;
      // 如果分类名称是"全部"，则不传递分类参数
      if (categoryId === 0) {
        this.fileInfoQueryParams.fileCategoryId= null;
      } else {
        this.fileInfoQueryParams.fileCategoryId = categoryId;
      }
      // 重新获取帖子列表
      this.list();
    },
    //   分类
    load() {
      listCategory(this.queryParamsCategory).then((response) => {
        this.categoryList = response.rows || [];
        this.categoryList.unshift({categoryName: "全部"});
        console.log(this.categoryList);
        this.loading = false;
      });
    },
    deleteCategory(categoryId){
      delCategory(categoryId).then((response) => {
        this.load()
        this.$message.success("删除成功")
      })
    },
    download(row) {
      const match = row.currentFileUrl.match(/\/\/[^/]+\/[^/]+\/(.*)/);
      const remoteFileName= match ? match[1] : '';
      downloadFileToMinio(remoteFileName,row.fileName)
    },
    share(doc) {
      console.log('分享文档:', doc);
    },

    deleteDoc(fileId) {
      this.$confirm('确定要删除该文档吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("fileId", fileId);
        delInfo(fileId).then(response => {})
        this.$message.success("删除成功")
        this.list()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log("被调用")
      this.list();
    },
    openDialog() {
      this.dialogVisible = true; // 打开对话框
    },
    confirm() {
      // 调用增加分类的api
      addCategory(this.categoryQueryParams).then((response) => {
        console.log("response", response);
      })
      this.dialogVisible = false; // 关闭对话框
      this.load();

    },
    cancel() {
      // 取消操作
      this.dialogVisible = false; // 关闭对话框
      this.categoryName = ''; // 清空输入框内容
    }
  }
}
</script>

<style scoped>
.knowledge-base-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.content-area {
  display: flex;
  gap: 20px;
}

.left-sidebar {
  width: 20%;
}

.search-results {
  width: 80%;
}

.box-card {
  border-radius: 4px;
}

.document-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; /* 增加卡片之间的间距，提升视觉效果 */
}

.document-item {
  margin: 0;
}


  .document-card {
    height: 100%;
    width: 100%; /* 修改此处，让卡片填满其所在的网格单元格 */
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
  }


.document-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
}

.card-header {
  height: 80px;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-bottom: 15px;
}

.card-header i {
  font-size: 48px;
}

.document-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.document-info {
  font-size: 12px;
  color: #909399;
  margin-bottom: 10px;
}

.divider {
  margin: 0 5px;
}

.document-desc {
  font-size: 14px;
  color: #606266;
  margin-bottom: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.document-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 15px;
}
.category-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}


.right-tools {
  display: flex;
  align-items: center;
  float: right;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 遮罩层 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(55, 65, 81, 0.7); /* 灰黑色半透明 */
  color: white;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding: 16px;
}

.overlay-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: auto;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s;
}

.action-btn:hover {
  color: #409EFF; /* Element 的主色调 */
}

.permission {
  align-self: flex-end;
  background-color: rgba(107, 114, 128, 0.9); /* 灰色背景 */
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}
.grid-view{
  width: 100%;
}
.list-view{
  width: 900px;
  margin-right: 30px;
}
.sidebar-menu {
  width: 180px;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 10px;
  position: sticky;

  height: fit-content;
}
.category-items {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 4px;
  justify-content: space-between;
  display: flex;
  align-items: center;}

/* 鼠标悬停时 */
.category-items:hover {
  background-color: #f0f0f0; /* 浅灰色 */
}

/* 选中时 */
.category-items-active {
  background-color: #e0e0e0; /* 稍深一点的灰色 */
}
.no-data {
  text-align: center;
  padding: 40px 0;
  color: #888;
  font-size: 15px;
}
</style>
